<template>
  <view class="page-wrapper" :data-theme="theme">
    <view class="list-wrapper">
      <view class="list-item" v-for="(item, index) in hotList" :key="index" @click="viewDetail(item.hot_search_link)">
          <image class="list-item__cover"  :src="item.hot_search_cover" mode="widthFix" lazy-load="true">
          </image>  
        <view class="list-item__title" >{{ item.hot_search_title }}</view>
        <view class="list-item__desc" v-if="item.hot_search_desc">{{ item.hot_search_desc }}</view>
        <view class="list-item__footer flex justify-between">
            <view class="">
              热度：{{ item.hot_search_heat }}
            </view>
            <navigator :url="`/pages/webview/index?url=${encodeURIComponent(item.hot_search_link)}`">阅读原文</navigator >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "List",
    data() {
      return {
      }
    },
    computed: {
      hotList: function () {
        return this.$store.state.list.data
      }
    },
    created () {
      this.$store.dispatch('list/getList')
    },
    methods: {
      viewDetail(link) {
        uni.navigateTo({
          url: `/pages/detail/index?link=${encodeURIComponent(link)}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrapper {
    padding: 40rpx;
  }
  .list-item {
    margin-bottom: 40rpx;
    background-color: var(--bg-color);
    border-radius: 20rpx;
    box-shadow: var(--card-item-box-shadow);
    &:last-child {
      margin-bottom: 0;
    }
  }

  .list-item__cover {
    width: 90vw;
    height: 320rpx;
    vertical-align: middle;
    border-radius: 20rpx 20rpx 0 0;
  }
  .list-item__title {
    font-size: 32rpx;
    font-weight: bold;
    color: var(--text-color);
    text-indent: 20rpx;
    margin: 20rpx;
  }
  .list-item__desc {
    margin: 20rpx;
    text-indent: 2em;
    font-size: 26rpx;
    color: var(--text-secondary-color);
  }
  .list-item__footer {
    padding: 20rpx;
    padding-top: 0;
    font-size: 26rpx;
    color: var(--text-secondary-color);
  }
</style>